<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="./general-styles-of-descendant-components.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      const { Component, PureComponent } = React;
      class PlusOne extends PureComponent {
        state = { count: 0 };
        sum = () => {
          let count = this.state.count;
          count++;
          this.setState({
            count,
          });
        };
        render() {
          const { count } = this.state;
          return (
            <div>
              <h4>当前的计算结果是:{count}</h4>
              <button onClick={this.sum}>计算/求和</button>
            </div>
          );
        }
      }
      class Sum extends PureComponent {
        state = { sum: 0 };
        goSum = () => {
          const { x, y } = this.props;
          this.setState({
            sum: x + y,
          });
        };
        render() {
          const { sum } = this.state;
          const { name } = this.props;
          return (
            <div>
              <h3> {name}</h3>
              <h4>当前的计算结果是:{sum}</h4>
              <button onClick={this.goSum}>计算/求和</button>
            </div>
          );
        }
      }

      function A(props) {
        const name = "这是一个封装组件插槽,child会渲染到 render里";
        return (
          <div className="A">
            <h3>我是A组件</h3>
            {props.render && props.render(name)}
          </div>
        );
      }
      function B(props) {
        return (
          <div className="B">
            <h3>我是B组件,{props.name}</h3>
          </div>
        );
      }
      const vdom = (
        <div className="Parent">
          <A render={(name) => <Sum x={5} y={6} name={name} />} />
        </div>
      );
      ReactDOM.render(vdom, document.getElementById("root"));
    </script>
  </body>
</html>
